<template>
  <div class="singer flex-row items-center pnr  no-wrap" v-if="singer.length">
    <div class="singerName" @click="handleSingerDetail(singer[0].mid, singer[0].name)">{{ singer[0].name }}</div>
    <template v-for="item in singer.slice(1)">
      <div :key="item.mid" class="flex-row items-center no-wrap">
        <div class="splitor msx">/</div>
        <div class="singerName" @click="handleSingerDetail(item.mid, item.name)">{{ item.name }}</div>
      </div>

    </template>
  </div>
</template>

<script lang="ts">
import {Component, Inject, Prop, Vue} from "vue-property-decorator";
import {Singer} from "@/ts.d/classes/Singer";
import {Path} from "@/ts.d/interfaces/Path";

@Component
export default class SingerDisplay extends Vue {
  @Prop() singer!: Singer[]

  @Inject() redirectTo!: (path: Path) => void

  handleSingerDetail(id: number, name: string) {
    this.redirectTo({
      mid: id,
      is: "Singer",
      type: "singer",
      singerName: name
    })
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.singerName {
  cursor: pointer;

  &:hover {
    color: $text-primary;
  }
}
</style>
